<template>
  <div class="booking-detail-container">
    <el-card class="booking-card">
      <h2>预约详情</h2>

      <el-descriptions :column="2" border>
        <el-descriptions-item label="预约单号">{{ booking.booking_number }}</el-descriptions-item>
        <el-descriptions-item label="预约状态">
          <el-tag :type="getStatusTagType(booking.status)">
            {{ getStatusLabel(booking.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="客户姓名">{{ booking.customer_name }}</el-descriptions-item>
        <el-descriptions-item label="联系电话">{{ booking.customer_phone }}</el-descriptions-item>
        <el-descriptions-item label="电子邮箱">{{ booking.customer_email }}</el-descriptions-item>
        <el-descriptions-item label="婚期">{{ booking.wedding_date }}</el-descriptions-item>
        <el-descriptions-item label="拍摄日期">{{ booking.shooting_date }}</el-descriptions-item>
        <el-descriptions-item label="摄影师">{{
          booking.photographer?.nickname
        }}</el-descriptions-item>
      </el-descriptions>

      <!-- 套餐信息 -->
      <div class="section package-info">
        <h3>套餐信息</h3>
        <el-descriptions :column="1" border>
          <el-descriptions-item label="套餐名称">{{ booking.package?.name }}</el-descriptions-item>
          <el-descriptions-item label="套餐价格"
            >¥{{ booking.package?.price }}</el-descriptions-item
          >
          <el-descriptions-item label="定金">¥{{ booking.package?.deposit }}</el-descriptions-item>
          <el-descriptions-item label="套餐内容">
            <div class="package-details">
              <div class="detail-section">
                <h4>套餐豪礼</h4>
                <div class="tags-container">
                  <el-tag
                    v-for="(item, index) in booking.package?.package_gift"
                    :key="index"
                    class="detail-tag"
                  >
                    {{ item }}
                  </el-tag>
                </div>
              </div>

              <div class="detail-section">
                <h4>团队服务</h4>
                <ul class="service-list">
                  <li v-for="(service, index) in booking.package?.team_service" :key="index">
                    <el-icon><Check /></el-icon>
                    {{ service }}
                  </li>
                </ul>
              </div>

              <div class="detail-section">
                <h4>影像产品</h4>
                <ul class="product-list">
                  <li v-for="(product, index) in booking.package?.image_product" :key="index">
                    <el-icon><Picture /></el-icon>
                    {{ product }}
                  </li>
                </ul>
              </div>

              <!-- 注意事项 -->
              <div class="detail-section">
                <h4>温馨提示</h4>
                <ul class="tips-list">
                  <li v-for="(tip, index) in booking.package?.tips" :key="index">
                    <el-icon><WarningFilled /></el-icon>
                    {{ tip }}
                  </li>
                </ul>
              </div>
            </div>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="section remarks" v-if="booking.remark">
        <h3>备注信息</h3>
        <div class="remark-content">{{ booking.remark }}</div>
      </div>

      <!-- 操作按钮 -->
      <div class="actions">
        <el-button @click="goBack">返回</el-button>
        <template v-if="userRole === 'photographer'">
          <el-button
            v-if="booking.status === 1"
            type="success"
            @click="handleConfirm"
            :loading="submitting"
          >
            确认预约
          </el-button>
        </template>
        <template v-if="[1, 2].includes(booking.status)">
          <el-button type="danger" @click="handleCancel" :loading="submitting">取消预约</el-button>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Check, Picture } from '@element-plus/icons-vue'
import { getBookingDetail, confirmBooking, cancelBooking } from '@/api/booking'
import { useUserStore } from '@/stores/user'
import type { Booking } from '@/types/booking'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

const userRole = computed(() => userStore.userRole)
const currentUserId = computed(() => userStore.userDetail?.id)

const booking = ref<Booking>({} as Booking)
const submitting = ref(false)

// 获取状态标签类型
const getStatusTagType = (status: number) => {
  const types: Record<number, string> = {
    1: 'warning',
    2: 'success',
    3: 'info',
    4: 'danger',
  }
  return types[status]
}

// 获取状态标签文本
const getStatusLabel = (status: number) => {
  const labels: Record<number, string> = {
    1: '待确认',
    2: '已确认',
    3: '已完成',
    4: '已取消',
  }
  return labels[status]
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 确认预约
const handleConfirm = async () => {
  try {
    await ElMessageBox.confirm('确定要接受这个预约吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })

    submitting.value = true
    await confirmBooking(booking.value.id)
    ElMessage.success('预约已确认')
    fetchBookingDetail()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('操作失败')
    }
  } finally {
    submitting.value = false
  }
}

// 取消预约
const handleCancel = async () => {
  try {
    const { value: reason } = await ElMessageBox.prompt('请输入取消原因', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputValidator: (value) => {
        if (!value) {
          return '请输入取消原因'
        }
        return true
      },
    })

    submitting.value = true
    await cancelBooking(booking.value.id, reason)
    ElMessage.success('预约已取消')
    fetchBookingDetail()
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('操作失败')
    }
  } finally {
    submitting.value = false
  }
}

// 获取预约详情
const fetchBookingDetail = async () => {
  try {
    const { data } = await getBookingDetail(Number(route.params.id))
    booking.value = data.data
  } catch (error) {
    ElMessage.error('获取预约详情失败')
  }
}

onMounted(() => {
  fetchBookingDetail()
})
</script>

<style scoped>
.booking-detail-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.booking-card {
  background: white;
  border-radius: 8px;
}

h2 {
  margin-bottom: 24px;
  color: #333;
}

.section {
  margin-top: 24px;
}

h3 {
  margin-bottom: 16px;
  color: #333;
}

.package-details {
  padding: 16px;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h4 {
  margin-bottom: 12px;
  color: #666;
}

.tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}

.service-list,
.product-list,
.tips-list {
  list-style: none;
  padding: 0;
}

.service-list li,
.product-list li,
.tips-list li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.service-list .el-icon {
  color: #67c23a;
}

.product-list .el-icon {
  color: #4073ff;
}

.tips-list .el-icon {
  color: #fab641;
}

.remark-content {
  background-color: #f5f7fa;
  padding: 16px;
  border-radius: 4px;
  color: #666;
}

.actions {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 16px;
}
</style>
